Repository navigation
feat(website): grid-as-hero with Alpenglow drawer - #62
Merged
Merged
Conversation
Brainstormed redesign: full-bleed live streaming grid as the hero, overlay drawer reveals marketing content. Light mode default with an Alpenglow palette (Bend/skiing inspiration). DOM-first via CSS upgrade preserves SEO; JS hydrates to upgrade visual presentation. Trail-map difficulty markers + alpine type + mountain silhouette as identity motifs. Mobile = natural scroll page (drawer is desktop-only). Out of scope: dark mode, mobile drawer overlay, BYOD hero, /docs redesign. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
19 tasks across 6 phases:
Phase 1: Alpenglow palette tokens
Phase 2: New atoms (TrailMarker, MountainFooter)
Phase 3: Drawer mechanism (useDrawer + Drawer + DrawerHandle + CSS upgrade)
Phase 4: HeroGrid (eventLog dataset + replay engine + component)
Phase 5: Updated marketing components (ComparisonTable, FeatureGrid,
ReceiptsBand consolidation, CtaSection, RouteAwareNav, palette
sweep on HowItWorks/CodeExample)
Phase 6: Page assembly + obsolete-component cleanup + smoke spec
rewrite + README update + final verification + PR open
Each task is TDD where applicable, with concrete code blocks and
expected outputs at every step.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- Create packages/ui/src/tokens.css with Alpenglow light-mode palette (warm cream paper + dusk peach + cobalt, inspired by Bend/skiing) - All 23 design tokens defined: page/card/raised backgrounds, text ramp, accents (warm orange + cool cobalt), severities, grid/drawer surfaces, typography, type scales, and layout tokens - Update apps/website/app/globals.css to import from new tokens file - Add --color-cool and --color-sev-ok to Tailwind @theme aliases - Simplify body rule: remove gradient, drop ambient blob positioning, use solid background with light-mode palette - All 51 existing tests pass; components render under new palette with same DOM structure Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- layout.tsx: drop legacy <Footer> + Footer/version props; RouteAwareNav now props-free - page.tsx: drop duplicate <RouteAwareNav> (it lives in root layout) - HeroGrid: add index signature to DisplayRow so it satisfies PretableRow generic - @pretable/ui: export ./tokens.css and emit it in dist (used by globals.css)
- replay.ts: drop unused param in pause() (interface still types it) - HeroGrid: eslint-disable for one-time reduced-motion hydration setRows - useDrawer: eslint-disable for post-hydration setIsUpgraded - prettier --write across redesign files + spec/plan docs
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
Contributor
Vercel preview readyPreview: https://pretable-qh6b8e7h7-cacheplane.vercel.app Updated automatically by the |
6 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Redesigns the marketing landing page so the live data grid IS the hero. Bottom drawer reveals a curated marketing arc on demand. Light mode, Alpenglow palette inspired by Bend / skiing. DOM-first SEO; JS upgrades to overlay drawer above 768px.
Spec: docs/superpowers/specs/2026-05-02-website-grid-as-hero-design.md
Plan: docs/superpowers/plans/2026-05-02-website-grid-as-hero.md
What changes
<HeroGrid>with live event-stream replay (1k rows/sec, looping multilingual canned event log)<Drawer>+<DrawerHandle>overlay above 768px; below 768px the drawer-wrap renders inline as natural scroll. Hash deep-links (/#receipts) auto-open. Esc + browser back close.packages/ui/src/tokens.css(warm cream + dusk peach + cobalt + dark slate).@pretable/uinow exports./tokens.css.<TrailMarker>(green/blue/black/double-black) in ComparisonTable columns and FeatureGrid cards;<MountainFooter>(Cascade silhouette + chairlift, "Built in Bend, OR.") once at page bottom.Verification
Test plan